<template>
  <transition name="move">
    <div v-show="showFlag" class="ingredient" ref="ingredient">
      <div class="back" @click="hide">
      </div>
      <div class="food-title">
        {{this.CartFood.productName}}
      </div>
      <ul class="ingredient-wapper">
        <li v-for="(Desc,index) in productDescList">
          <p class="ingredient-name">{{Desc.supSpecName}}</p>
          <div class="ingredient-choice">
      					<span class="collection-item"
                      v-for="ingreName in Desc.productSpecList"
                      @click.stop.prevent="selected(ingreName.id,index,ingreName.specName,Desc.productNo)"
                      :class="{active: activeList.indexOf(ingreName.id)>=0}"
                      :value="ingreName.supId">{{ingreName.specName}}</span>
          </div>
        </li>
      </ul>
      <div class="confirm" @click="confirm">确定</div>
    </div>
  </transition>
</template>

<script>
  import BScroll from 'better-scroll';
  import Vue from 'vue';
  import Bus from 'common/js/bus.js';
  import {getProductInf} from 'src/methods/request.js'

  export default {
    props: {},
    data () {
      return {
        op: 0, // 记录商品ID
        showFlag: false,
        activeName: {},
        actspecName: {},
        productDescList: [],
        activeList: [],
        specNameList: [],
        CartFood: [],
        ingredArr: []
      };
    },
    created () {
      //通过点击添加菜品时获取到的productNo来与后台交互
      Bus.$on('getCartFood', CartFood => {
        this.CartFood = CartFood;
        //获取单个商品的信息
        getProductInf({productNo: this.CartFood.productNo}).then(
          response => {
            this.productDescList = response.data;
          }
        ).catch(
          error => console.log(error)
        );
      });
    },
    methods: {
      hide () {
        //组件的隐藏
        this.showFlag = false;
        this.$emit("listenFoodBack", false)
      },
      show () {
        this.showFlag = true;
      },
      selected (id, index, specName, productNo) {
        //口味选择的id集合
        if (this.op != productNo) {
          this.activeName = [];
          this.actspecName = [];
          this.op = productNo;
        }
        this.activeName[index] = id;
        this.activeList = Object.values(this.activeName);
        //口味选择的name集合
        this.actspecName[index] = specName;
        this.specNameList = Object.values(this.actspecName);
      },
      confirm () {
        //点击确定时触发
        Bus.$emit('ifAddCount', true);
				this.CartFood.specNameList = this.specNameList.join("/");
        this.CartFood.orderProductSpecList = this.activeList;
        this.hide();
      }
    },
    components: {}
  }
</script>

<style>
  .ingredient {
    position: fixed;
    left: 10%;
    top: 15%;
    z-index: 30;
    width: 80%;
    height: 70%;
    background: #f2f2f2;
    border-radius: 12px;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .food-title {
    width: 100%;
    line-height: 38px;
    color: #333333;
    text-align: center;
    font-size: 14px;
    border-bottom: 1px solid #d9d9d9;
  }

  .ingredient-wapper {
    padding: 0 10px;
  }

  .ingredient-name {
    font-size: 12px;
    color: #a1a1a1;
    line-height: 22px;
    margin: 10px 0;
  }

  .ingredient-choice span {
    font-size: 12px;
    padding: 6px 12px;
    color: #a6a6a6;
    border: 1px solid #a6a6a6;
    border-radius: 25px;
    margin-right: 10px;
  }

  .ingredient-choice .active {
    background: #e78a3d;
    color: #fff;
    border: 1px solid #e78a3d;
  }

  .confirm {
    width: 80%;
    height: 36px;
    border: 1px solid #e6893c;
    text-align: center;
    line-height: 36px;
    color: #e6893c;
    border-radius: 30px;
    position: fixed;
    left: 10%;
    bottom: 5%;
  }
</style>
